<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>京东的左侧导航</title>
		<link rel="stylesheet" href="./css/reset.css">
		<style>
            /*
				设置body
			 */
            body {
                /*
                    设置一个网页的背景,以使我们方便查看
                */
                background-color: #bfa;
            }

            /*
                设置菜单外部容器
            */
            .left-nav {
                /*
                    设置宽度
                */
                width: 190px;
                /*
                    设置高度
                */
                height: 480px;
                /*
                    设置padding
                */
                padding: 10px 0;
                /*
                    设置一个背景颜色
                */
                background-color: #fff;

                /*
                    居中
                */
                margin: 50px auto;

            }

            /*菜单内部的item*/
            .left-nav .item {
                height: 25px;
                /* (固定写法) 要让一个文字在父元素中垂直居中,只需将父元素的line-height设置为一个和父元素height一样的值  */
                line-height: 25px;
                /*
                    设置item的右内边距,将文字向内移动
                */
                padding-left: 18px;

                /*设置字体大小*/
	            font-size: 12px;
            }

            /*
                为item设置一个鼠标移入的状态
            */
            .left-nav .item:hover {
                background-color: #d9d9d9;
            }

            /*
                设置超链接的样式
            */
            a {
                /*设置字体大小*/
                font-size: 14px;
                /*设置字体颜色*/
                color: #333;
                /*去除下划线*/
                text-decoration: none;
            }

            /*设置超链接的hover的样式*/
            .item a:hover {
	            color: #c81623;
            }

		</style>
	</head>
	<body>
		<!--
			创建一个外部容器 nav(div) div(div) ul(li)
		-->
		<nav class="left-nav">
			<div class="item">
				<a href="#">
					家用电器
				</a>
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>


			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>


			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>


			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">手机</a>/<a href="#">运营商</a>/<a href="#">数码</a>/
			</div>

			<div class="item">
				<a href="#">
					工业品
				</a>
			</div>


		</nav>


	</body>
</html>
